<!DOCTYPE html>
<html lang="en">

<head>
    <style type="text/css">
        .ztree li span.button.add {
            margin-left: 2px;
            margin-right: -1px;
            background-position: -144px 0;
            vertical-align: top;
            *vertical-align: middle;
        }
    </style>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="/lib/zTree_v3/css/zTreeStyle/zTreeStyle.css">
    <script type="text/javascript" src="/lib/zTree_v3/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="/lib/zTree_v3/js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="/lib/zTree_v3/js/jquery.ztree.exedit.js"></script>
</head>

<body>
    <div class="layuimini-container layui-anim layui-anim-upbit">
        <div class="layuimini-main">
            <fieldset class="table-search-fieldset">
                <legend>搜索信息</legend>
                <div style="margin: 10px 10px 10px 10px">
                    <form class="layui-form layui-form-pane">
                        <div class="layui-form-item">
                            <label class="layui-form-label">专题名称</label>
                            <div class="layui-inline">
                                <input type="text" id="keyWord" name="keyWord" placeholder="请输入专题名称" autocomplete="off"
                                    class="layui-input">
                            </div>
                            <div class="layui-inline">
                                <button type="submit" class="layui-btn layui-btn-primary" lay-submit
                                    lay-filter="searchSubmit"><i class="layui-icon"></i> 搜 索
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </fieldset>
            <br> <br>
            <fieldset class="table-search-fieldset">
                <br>
                <legend>编辑专题</legend>
                提示：将鼠标移至专题上可显示专题序号,专题按序号升序排列
                <br><br>
                <div style="height: 500px;">
                    <div class="content_wrap">
                        <div class="zTreeDemoBackground">
                            <ul id="treeMultiple" class="ztree"
                                style="height: 480px;overflow: hidden;overflow-y: auto;vertical-align: top;"></ul>
                        </div>
                    </div>
                </div>
                <div hidden>
                    <input type="text" name="maxSortId">
                </div>
            </fieldset>
        </div>
    </div>
    <script type="text/javascript">
        var setting = {
            check: {
                enable: false
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "ztjId"
                },
                key: {
                    name: "name",
                    title: "sortId"
                }
            },
            callback: {
                onClick: zTreeOnClick,
                beforeRemove: zTreeBeforeRemove,
                onRemove: zTreeOnRemove,
            },
            edit: {
                drag: false,
                enable: true,
                showRemoveBtn: setRemoveBtn,
                removeTitle: "删除",
                renameTitle: "编辑",
                showRenameBtn: false
            },
            view: {
                addHoverDom: addHoverDom,
                removeHoverDom: removeHoverDom,
                selectedMulti: false
            }
        };

        //初始化
        var beforeZtjId = parent.editData.id,
            beforeZtjName = parent.editData.name;
        $(function () {
            var ztName = $("input[name='keyWord']").val();
            refreshNode(beforeZtjId, beforeZtjName, ztName);
        });

        //刷新树
        function refreshNode(ztjId, ztjName, ztName) {
            shared.ajaxGet('/adminTechnicalBag/queryZTList', { ztjId: ztjId, ztName: ztName, ztjName: ztjName }, function (res) {
                if (res) {
                    // ztree初始化 a:dom元素 b:配置对象 c:数据源
                    var zTree = $.fn.zTree.init($("#treeMultiple"), setting, res),
                        treeObj = $.fn.zTree.getZTreeObj("treeMultiple");
                    //展开节点
                    treeObj.expandAll(true);
                    var nodesSys = treeObj.getNodes(); //可以获取所有的父节点
                    var nodes = treeObj.transformToArray(nodesSys); //获取树所有节点
                    if (nodes.length == 1) {
                        $("input[name='maxSortId']").val("0")
                    } else {
                        $("input[name='maxSortId']").val(nodes[nodes.length - 1].sortId)
                    }
                    for (var i = 0; i < nodes.length; i++) {
                        if (nodes[i].ztjId == null) {
                            nodes[i].isParent = true;
                            nodes[i].sortId = nodes[i].name
                        }
                        treeObj.updateNode(nodes[i]);
                    }
                }
            })
        }

        //form表单
        layui.form.render();

        //监听搜索操作
        layui.form.on('submit(searchSubmit)', function (data) {
            var ztName = $("input[name='keyWord']").val();
            refreshNode(beforeZtjId, beforeZtjName, ztName);
            return false;
        })

        //点击结点修改---------------------------------------------------------------------------
        function zTreeOnClick(event, treeId, treeNode) {
            if (treeNode.ztjId != null) {
                opreatType = "edit";
                treeNode.ztjName = beforeZtjName;
                treeNode.ztjId = beforeZtjId;
                onClickData = treeNode;
                maxSortId = $("input[name='maxSortId']").val();
                var content = layui.miniPage.getHrefContent('mypages/knowledgeManagement/addZT.html');
                var openWH = layui.miniPage.getOpenWidthHeight();
                var index = layer.open({
                    title: '编辑专题',
                    type: 1,
                    shade: 0.2,
                    area: ['550px', '400px'],
                    maxmin: true,
                    shadeClose: false,
                    content: content,
                    btn: ['确认'],
                    yes: function (index) {
                        var ztSortId = Number($("input[name='sortId']").val());
                        var maxztSortId = Number($("input[name='maxSortId']").val());
                        if (ztSortId < 0 || ztSortId > maxztSortId) {
                            layer.msg('专题序号超出范围！', { icon: 7, time: 1000 })
                        } else {
                            var data = {};
                            data.id = $("input[name='id']").val()
                            data.ztjId = $("input[name='ztjId']").val()
                            data.name = $("input[name='name']").val()
                            data.sortId = $("input[name='sortId']").val()
                            data.beforeSortId = $("input[name='beforeSortId']").val();
                            shared.ajaxPost('/adminTechnicalBag/updateZT', data, function (res) {
                                if (res == "修改专题成功") {
                                    var ztjId = parent.editData.id,
                                        ztjName = parent.editData.name,
                                        ztName = "";
                                    refreshNode(ztjId, ztjName, ztName);
                                    tableRender(tableBar, collectParams())
                                    layer.close(index);
                                } else {
                                    layer.msg(res)
                                }
                            })
                        }
                    }
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            };
        }


        function updateZT(id, name, sortId, ztjId) {
            shared.ajaxPost('/adminTechnicalBag/updateZT', { id: id, name: name, sortId: sortId, ztjId: ztjId }, function (res) {
                var ztName = $("input[name='keyWord']").val();
                refreshNode(beforeZtjId, beforeZtjName, ztName);
            })
        }

        // 显示删除图标------------------------------------------------------------------------------
        function setRemoveBtn(treeId, treeNode) {
            if (treeNode.ztjId != null) {
                return true;
            }
        }

        // 删除之前事件
        function zTreeBeforeRemove(treeId, treeNode) {
            return confirm("是否确认删除？") == true;
        }

        // 删除节点事件
        function zTreeOnRemove(event, treeId, treeNode) {
            deleteZT(treeNode.id);
        }

        function deleteZT(ztId) {
            shared.ajaxPost('/adminTechnicalBag/deleteZT', { id: ztId }, function (res) {
                var ztName = $("input[name='keyWord']").val();
                refreshNode(beforeZtjId, beforeZtjName, ztName);
            })
        }

        //添加节点---------------------------------------------------------------------------------
        function addHoverDom(treeId, treeNode) {
            if (treeNode.ztjId == null) {
                var sObj = $("#" + treeNode.tId + "_span");
                if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
                var addStr = "<span class='button add' id='addBtn_" + treeNode.tId + "' title='添加' οnfοcus='this.blur();'></span>";
                sObj.after(addStr);//加载添加按钮
                var btn = $("#addBtn_" + treeNode.tId);
                //绑定添加事件，并定义添加操作
                if (btn) btn.bind("click", function () {
                    treeNode.name = beforeZtjName;
                    treeNode.id = beforeZtjId;
                    onClickData = treeNode;
                    opreatType = "add";
                    maxSortId = $("input[name='maxSortId']").val();
                    var content = layui.miniPage.getHrefContent('mypages/knowledgeManagement/addZT.html');
                    var openWH = layui.miniPage.getOpenWidthHeight();
                    var index = layer.open({
                        title: '添加专题',
                        type: 1,
                        shade: 0.2,
                        area: ['550px', '400px'],
                        maxmin: true,
                        shadeClose: false,
                        content: content,
                        btn: ['确认'],
                        yes: function (index) {
                            var ztSortId = Number($("input[name='sortId']").val());
                            var maxztSortId = Number($("input[name='maxSortId']").val());
                            if (ztSortId < 0 || ztSortId > maxztSortId) {
                                layer.msg('专题序号超出范围！', { icon: 7, time: 1000 })
                            } else {
                                var data = {};
                                data.ztjId = $("input[name='ztjId']").val()
                                data.name = $("input[name='name']").val()
                                data.sortId = $("input[name='sortId']").val()
                                data.beforeSortId = $("input[name='beforeSortId']").val()
                                shared.ajaxPost('/adminTechnicalBag/insertZT', data, function (res) {
                                    if (res == "新建专题成功") {
                                        var ztjId = parent.editData.id,
                                            ztjName = parent.editData.name,
                                            ztName = "";
                                        refreshNode(ztjId, ztjName, ztName);
                                        tableRender(tableBar, collectParams())
                                        layer.close(index);
                                    } else {
                                        layer.msg(res)
                                    }
                                })
                            }
                        },
                    });
                    $(window).on("resize", function () {
                        layer.full(index);
                    });
                    return false;
                });
            }
        };

        function removeHoverDom(treeId, treeNode) {
            if (treeNode.ztjId == null) {
                $("#addBtn_" + treeNode.tId).unbind().remove();
            }
        };
    </script>
</body>

</html>